<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'Cesium3DTileset',
        data() {
            return {}
        },
        mounted() {
            let viewer = this.initCesium();
            this.add3DTileset(viewer)
        },
        methods: {
            initCesium: function () {
                let viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: false,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                    // terrainProvider: new Cesium.ArcGISTiledElevationTerrainProvider({
                    //     url: 'https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer'
                    // })
                });
                viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
                viewer.scene.globe.depthTestAgainstTerrain = true;
                return viewer;
            },
            add3DTileset(viewer) {
                viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                    url: "http://localhost:8888/model/3dtiles/PointCloud/sd2/tileset.json",
                    show: true,//是否显示
                    backFaceCulling: true,//背面绘制
                    style: new Cesium.Cesium3DTileStyle({
                        pointSize: 5,
                        color: 'color("red", 0.5)',
                        show: true
                    })
                })).readyPromise.then((tileset) => {
                    viewer.zoomTo(tileset)
                })

                let handler = viewer.screenSpaceEventHandler;
                //左键点击事件
                handler.setInputAction((event) => {
                    //用来拾取三维空间中的物体
                    let pickedFeature = viewer.scene.pick(event.position);
                    if (!Cesium.defined(pickedFeature)) {
                        console.log("nothing picked")
                        return;
                    }
                    if (pickedFeature instanceof Cesium.Cesium3DTilePointFeature) {
                        const propertyIds = pickedFeature.getPropertyIds();
                        const length = propertyIds.length;
                        for (let i = 0; i < length; ++i) {
                            const propertyId = propertyIds[i];
                            console.log(`{propertyId}: ${feature.getProperty(propertyId)}`);
                        }
                    }
                    console.log(pickedFeature)
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
            },
        }
    }
</script>

